
{% macro form_cron(label, name, value, error, required=True, width='w-full', input_class='') %}
  <div class="mb-5 {{ width }}"
       x-data="{ cron: '{{ value|default("") }}', setCron(val) { this.cron = val; $nextTick(() => this.validate()); }, validate() { const input = document.getElementById('{{ name }}'); input.setCustomValidity(''); if (!input.validity.valid) { input.setCustomValidity('Input must be a valid cron expression'); } } }">
    <fieldset class="fieldset bg-base-100 border-base-300 rounded-box border px-4 py-2">
      <legend class="fieldset-legend">{{ label }}</legend>
      <div class="flex flex-row gap-2 mb-2 justify-center">
        <button type="button" class="btn btn-sm" @click="setCron('0 0 * * *')">Daily</button>
        <button type="button" class="btn btn-sm" @click="setCron('0 0 * * 0')">Weekly</button>
        <button type="button" class="btn btn-sm" @click="setCron('0 0 1 * *')">Monthly</button>
      </div>
      <input id="{{ name }}"
             type="text"
             placeholder="0 */8 * * *"
             class="input input-sm w-full validator{% if error %} input-error{% endif %} {{ input_class }}"
             name="{{ name }}"
             pattern="([^\s]+\s){4}[^\s]+"
             @input="validate();"
             {% if required %}required{% endif %}
             :value="cron"
             hx-preserve />
      {% if error -%}
        <div role="alert" class="alert alert-error alert-soft w-full flex-initial">{{ error }}</div>
      {% endif -%}
    </fieldset>
  </div>
{% endmacro %}
